<template>
  <div class="comment-container">
    <el-card class="comment-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-table :data="commentsList" style="width: 100%" :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }" v-loading="loading">
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="total_comment_count" label="总评论数">
        </el-table-column>
        <el-table-column prop="fans_comment_count" label="粉丝评论数">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.comment_status">正常</span>
            <span v-else>关闭</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" v-if="!scope.row.comment_status" size="small" @click="changeStatus(scope.row)">
              打开评论
            </el-button>
            <el-button type="danger" v-else size="small" @click="changeStatus(scope.row)">关闭评论</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.per_page"
          layout="total, sizes, prev, pager, next, jumper" :total="total" :disabled="loading">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
  import {
    getArticlesInfo
  } from '@/api/article.js'
  import {
    changeCommentStatus
  } from '@/api/comment.js'
  export default {
    name: 'Comment',
    data() {
      return {
        loading: false,
        commentsList: [],
        searchForm: {
          status: '',
          channel_id: '',
          begin_pubdate: '',
          end_pubdate: '',
          page: 1,
          per_page: 20,
          response_type: 'comment'
        },
        total: 0,
        allow_comment: '',
      }
    },
    created() {
      this.getAllCommentsInfo()
    },
    methods: {
      getAllCommentsInfo() {
        getArticlesInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.commentsList = results
          this.total = total_count
        })
      },
      handleSizeChange(val) {
        this.loading = true
        this.searchForm.per_page = val
        this.searchForm.page = 1
        getArticlesInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.commentsList = results
          this.total = total_count
          this.loading = false
        })
      },
      handleCurrentChange(val) {
        this.loading = true
        this.searchForm.page = val
        getArticlesInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.commentsList = results
          this.total = total_count
          this.loading = false
        })
      },
      changeStatus(row) {
        if (row.comment_status) {
          this.$confirm('亲，您是否要关闭当前文章评论功能？如果关闭读者将无法对这篇文章进行评论。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log('a')
            this.allow_comment = false
            changeCommentStatus(row.id, {
              allow_comment: this.allow_comment
            }).then(res => {
              this.$message({
                type: 'success',
                message: '关闭成功!'
              })
              this.getAllCommentsInfo()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消关闭'
            });
          })
        } else {
          this.$confirm('亲，您是否要打开当前文章评论功能？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log('b')
            this.allow_comment = true
            changeCommentStatus(row.id, {
              allow_comment: this.allow_comment
            }).then(res => {
              this.$message({
                type: 'success',
                message: '打开成功!'
              })
              this.getAllCommentsInfo()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消打开'
            });
          })
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  .comment-card {
    margin: 15px;
  }

</style>
